<template>
	
	<view class="details" v-if="isFinish" >
		<scroll-view scroll-y="true" :style="{height:wh+'px'}">
			<!-- 图片 -->
			<view class="pic">
				<image :src="goods.goods_big_logo" mode="aspectFill"></image>
			</view>
			<!-- 价格 -->
			<view class="price">￥{{priceFormat}} </view>
			<!-- 商品名称 -->
			<view class="name">{{goods.name}}</view>
			<!-- 购买数量 -->
			<view class="num">
				<text class="tag">数量</text>
				<view class="num-oper">
					<view @tap="op(-1)">-</view>
					<view>{{num}}</view>
					<view @tap="op(1)">+</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="info">
				<view class="brand">
					<text class="tag">品牌</text>{{goods.brandname}}
				</view>
				<view class="type">
					<text class="tag">类别</text>{{goods.cat_one_name}}
				</view>
				<view class="weight">
					<text class="tag">重量</text>{{weightFormat}}
				</view>
				<view class="uptime">
					<text class="tag">上架时间</text>{{timeFormat}}
				</view>
			</view>
			<!-- 商品介绍 -->
			<view class="intrduce" v-html="goods.introduce">
			</view>
		</scroll-view>
	</view>
	<SkeletonGoodsDetetails v-else></SkeletonGoodsDetetails>
	<!-- 底部的添加购物车组件 -->
	<view class="goods-carts">
		<uni-goods-nav @click="onClick" @buttonClick='btnClick' />
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive
	} from 'vue'
	import {
		onLoad,onReady
	} from '@dcloudio/uni-app'
	import {
		dateFormat
	} from "../../utils/tools.js"
	import SkeletonGoodsDetetails from '/components/SkeletonGoodsDetetails/SkeletonGoodsDetetails.vue'
	// 商品id
	const id = ref(0)
	const wh=ref(0)
	const isFinish=ref(false)
	// 应该在onReady中获取可视区高度,这里已经渲染完成,可以正确获取高度,
	// 在onLoad中获取可视区高度错误,因为当时正在加载,还没有渲染完成,没有导航栏和tabbar,因此可视区与屏幕高度是相同的.
	onReady(()=>{
		console.log(uni.getSystemInfoSync().uniPlatform);
		 
		console.log("windowHeight"+uni.getSystemInfoSync().windowHeight);	
		console.log("screenHeight"+uni.getSystemInfoSync().screenHeight);	
		console.log("statusBarHeight"+uni.getSystemInfoSync().statusBarHeight);	
		
		if (uni.getSystemInfoSync().uniPlatform === 'mp-weixin') {
			// 微信端可视区域高度计算；uni.getWindowInfo().windowHeight
			wh.value = uni.getWindowInfo().windowHeight -50
			// console.log("weixin");
		} else {
			// h5端可视区域高度，,是不含tabbar和导航栏的高度，这里需要减去底部的添加购物车的区域高度
 			wh.value = uni.getWindowInfo().windowHeight - 50  
			 
		}
		console.log(wh.value);
	})
	onLoad((params) => {
		id.value = params.id
		getGoodsDetails()
	
	})


	let goods = ref({})

	function getGoodsDetails() {

		uni.$post('/goodInfoById', {
			id: id.value
		}).then(res => {
			if (res.code == 200) {
				if (res.goodsList.length > 0) {
					goods.value = res.goodsList[0]
					goods.value.goods_big_logo = uni.$base_url + goods.value.goods_big_logo
					console.log(res.goodsList[0]);
					isFinish.value=true
				} else {
					uni.showToast({
						title: "服务器错误"
					})
				}
			} else {
				uni.showToast({
					title: '网络错误'
				})
			}
		})
	}
	// 对价格进行处理
	const priceFormat = computed(() => {
         // 获取价格字段值
		let price = goods.value.price
		// 保留两位小数
		return parseFloat(price).toFixed(2)
	})
	const weightFormat = computed(() => {
		let w = parseInt(goods.value.weight);
		if (w < 1000) {
			return w + "g"
		} else {
			return (w / 1000).toFixed(2) + "kg"
		}
	})
	const timeFormat = computed(() => {
		return dateFormat(goods.value.add_time)

	})

	const num = ref(1)

	function op(n) {
		num.value += n;
		if (num.value < 0) {
			num.value = 0
		}
	}

	function onClick(e) {
		console.log(e);
	}

	function btnClick(e) {
		console.log(e);
	}
</script>

<style scoped>
	/* 页面设置背景色 */
	.details {
		background-color: #eee;
       height: calc(100vh - 50px);
	}

	/* 图片 */
	.details .pic image {
		width: 100%;
		height: 240px;
	}

	/* 价格 */
	.details .price {
		background-color: #fff;
		font-size: 35rpx;
		color: #f00;
		padding: 10px;

	}

	/* 名称 */
	.details .name {
		background-color: #fff;
		margin-top: 3rpx;
		padding: 10px;
		color: #666;
	}

	.details .num {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 10px;
	}

	.tag {
		background-color: #ff6700;
		border-radius: 5px;
		padding: 3px 5px;
		color: #fff;
		font-size: 25rpx;
		margin-right: 10px;
	}

	.details .num .num-oper {
		display: flex;
		margin-right: 10px;
		align-items: center;
	}

	.details .num .num-oper view {
		width: 20px;
		height: 20px;
		border: 1px solid #ccc;
		text-align: center;
		line-height: 20px;
		font-size: 25rpx;
	}

	.details .info {
		margin-top: 10rpx;
		background-color: #fff;
		padding: 10px;

	}

	.details .info view {
		margin-bottom: 10px;
	}

	.details .intrduce {
		margin-top: 5px;
		background-color: #fff;
		padding: 10px;
		line-height: 1.7em;

	}

	/* 底部显示 */
	.goods-carts {
		border: 1px solid green;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>